<template>
  <div class="device-status">
    <div class="header-title">
      <dv-decoration-3 style="width:100px;height:20px;" />
      <div class="title-text">设备在线状态</div>
      <dv-decoration-3 style="width:100px;height:20px;" />
    </div>
    <div class="device-list">
      <dv-scroll-board 
        :config="config" 
        @mouseover="mouseoverHandler" 
        @click="clickHandler"
      />
    </div>
    <div class="status-summary">
      <div class="summary-item">
        <span class="label">在线设备：</span>
        <span class="value online">{{ onlineCount }}</span>
      </div>
      <div class="summary-item">
        <span class="label">总设备数：</span>
        <span class="value total">{{ totalDevices }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, onBeforeUnmount } from 'vue'
import { get } from '@/utils/request'

const devices = ref([])
const config = reactive({
  header: ['设备ID', '设备名称', '所属大棚', '状态'],
  data: [],
  index: true,
  columnWidth: [10, 70, 120, 60],
  align: ['center', 'center', 'center', 'center'],
  headerBGC: 'rgba(3, 211, 236, 0.1)',
  oddRowBGC: 'rgba(3, 211, 236, 0.1)',
  evenRowBGC: 'rgba(0, 0, 0, 0.3)',
  headerHeight: 35,
  rowHeight: 35,
  hoverPause: true,
  waitTime: 2000 // 停留时间
})

const totalDevices = computed(() => devices.value.length)
const onlineCount = computed(() => devices.value.length)

const fetchDevices = async () => {
  try {
    const response = await get('/api/devices/list')
    if (response && Array.isArray(response)) {
      devices.value = response
      config.data = devices.value.map(device => [
        device.deviceId,
        device.name,
        device.greenhouseName || '-',
        '<span class="status-tag online">在线</span>'
      ])
    }
  } catch (error) {
    console.error('获取设备列表失败:', error)
  }
}

const mouseoverHandler = (row) => {
  console.log('鼠标悬停:', row)
}

const clickHandler = (row) => {
  console.log('点击设备:', row)
  // 这里可以添加点击后的操作，比如显示设备详情
}

let timer = null

onMounted(() => {
  fetchDevices()
  timer = setInterval(fetchDevices, 3000000)
})

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<style lang="scss" scoped>
.device-status {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;

  .header-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    height: 20px;

    .title-text {
      font-size: 14px;
      color: #03d3ec;
      white-space: nowrap;
      margin: 0 10px;
    }
  }

  .device-list {
    flex: 1;
    overflow: hidden;

    :deep(.dv-scroll-board) {
      width: 100% !important;
      height: 100% !important;

      .status-tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;

        &.online {
          background: rgba(25, 190, 107, 0.2);
          color: #19be6b;
          border: 1px solid #19be6b;
        }
      }
    }
  }

  .status-summary {
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
    background: rgba(3, 211, 236, 0.1);
    margin-top: 10px;

    .summary-item {
      display: flex;
      align-items: center;
      gap: 8px;

      .label {
        color: #fff;
        font-size: 14px;
      }

      .value {
        font-size: 16px;
        font-weight: bold;

        &.online {
          color: #19be6b;
        }

        &.total {
          color: #03d3ec;
        }
      }
    }
  }
}
</style>